<template>
  <view>
    <view class="wrap" :style="Height">
      <view class="u-tabs-box" style="border-bottom: 2rpx solid #f6f6f6;">
        <u-tabs-swiper id="target" active-color="#fed500" inactive-color="#000000" ref="tabs" :list="lists" :current="current"
          @change="change" bar-width="60" gutter="80"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
            <view class="page-box">
              <view class="list list_active_blue" :class="[item.isActive ? 'list-item__black' : '']"
              v-for="(item,index) in Data2" 
              :key="index">
                <view class="list-item">
                  <view class="list-item__container container--right">
                    <view class="list-item__header">
                      <view class="list-item__icon">￥<text class="list-item__price">{{item.price}}</text> </view>
                    </view>
                    <view class="list-item__content">
                      <text class="list-item__content-title">{{item.title}}</text>
                      <text class="list-item__content-note">{{item.time}}</text>
                    </view>
                    <view class="list-item__extra">
                      <view class="list-item__extra-text_t" @click="get2(index)">{{item.isActive ? '已领取' : '领取'}}</view>
                      <view class="list-item__extra-text_b" @click="ClaimCenter(item.type)">查看详情</view>
                    </view>
                  </view>
                </view>
              </view>
              <view style="height: 50rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh1" @refresherrestore="onRestore">
            <view class="page-box">
              <view class="list list_active_red" :class="[item.isActive ? 'list-item__black' : '']"
              v-for="(item,index) in Data" 
              :key="index">
                <view class="list-item">
                  <view class="list-item__container container--right">
                    <view class="list-item__header">
                      <view class="list-item__icon">￥<text class="list-item__price">{{item.price}}</text> </view>
                    </view>
                    <view class="list-item__content">
                      <text class="list-item__content-title">{{item.title}}</text>
                      <text class="list-item__content-note">{{item.time}}</text>
                    </view>
                    <view class="list-item__extra">
                      <view class="list-item__extra-text_t" @click="get(index)">{{item.isActive ? '已领取' : '领取'}}</view>
                      <view class="list-item__extra-text_b" @click="ClaimCenter(item.type)">查看详情</view>
                    </view>
                  </view>
                </view>
              </view>
              <view style="height: 50rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <view class="s-btn s-btn--primary s-size-default" @click="close">关闭</view>
  </view>
</template>

<script>
  var vm;
  export default {
    data() {
      return {
        lists: [{
            name: '活动'
          },
          {
            name: '商品'
          },
        ],
        Data:[{
          price:10,
          title:'满250使用(限领一张)',
          time:'有效期至2023.12.30 23:59',
          type:0,
          isActive:false,
        },{
          price:20,
          title:'满500使用(限领一张)',
          time:'有效期至2023.12.30 23:59',
          type:0,
          isActive:false,
        },{
          price:98,
          title:'新会员专享',
          time:'有效期至2023.12.30 23:59',
          type:1,
          isActive:false,
        }],
        Data2:[{
          price:10,
          title:'满250使用(限领一张)',
          time:'有效期至2023.12.30 23:59',
          type:1,
          isActive:false,
        },
        {
          price:98,
          title:'新会员专享',
          time:'有效期至2023.12.30 23:59',
          type:1,
          isActive:false,
        },],
        current: 0,
        swiperCurrent: 0,
        tabsHeight: 0,
        dx: 0,
        triggered:true,
        activeColor: '#fed500',
        Height:0,
        type2:false,
      };
    },
    onLoad() {
      vm = this;
    },
    mounted() {
      // #ifdef H5 || APP-PLUS
      uni.createSelectorQuery().in(this).select("#target").boundingClientRect(data => {
        this.Height = 'height: calc(100vh - '+(data.height)+'px);'
      }).exec() 
      // #endif
    
    },
    methods: {
      ClaimCenter(type){
        uni.navigateTo({
        	url: '/pages/Index/ClaimCenter/ClaimCenter?type='+type
        });
      },
      get(index){
        this.Data[index].isActive = true
      },
      get2(index){
        this.Data2[index].isActive = true
      },
      reachBottom() {
        
      },
      close(){
        this.$u.route({
          type:'navigateBack',
          delta:1
        })
      },
      // tab栏切换
      change(index) {
        this.swiperCurrent = index;
      },
      transition({
        detail: {dx}
      }) 
      {
        this.$refs.tabs.setDx(dx);
      },
      animationfinish({
        detail: {
          current
        }
      }) 
      {
        this.$refs.tabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },

      /**
       * 自定义下拉刷新控件被下拉
       */
      onPulling(){
        this.triggered = true
      },
      
      /**
       * 自定义下拉刷新被触发
       */
      onRefresh(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      onRefresh1(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      
      /**
       * 自定义下拉刷新被中止
       */
      onRestore(){
        this.triggered = false
      }
    }
  };
</script>



<style lang="scss" scoped>
  .wrap {
    display: flex;
    flex-direction: column;
    /* #ifdef MP-WEIXIN */
    height: calc(100vh - var(--window-top));
    /* #endif */
    width: 100%;
    background-color: #fff;
  }
  .swiper-box {
    flex: 1;
  }
  .swiper-item {
    height: 100%;
  }
  .img{
    width: 100%;
    height: 100%;
  }
  .page-box{
    padding: 32rpx;
  }
  .list{
    background-color: #f3f3f3;
    margin-bottom: 24rpx;
    border-radius: 28rpx;
    color: #fff;
    .list-item{
      display: flex;
      font-size: 32rpx;
      position: relative;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      cursor: pointer;
      .list-item__container{
        position: relative;
        display: flex;
        flex-direction: row;
        flex: 1;
        overflow: hidden;
        .list-item__header {
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 32rpx 0 32rpx 32rpx;
          .list-item__icon{
            margin-right: 36rpx;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
            .list-item__price{
              font-size: 36rpx;
            }
          }
        }
        .list-item__content{
          display: flex;
          padding-right: 16rpx;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          padding: 32rpx 0;
          .list-item__content-title{
            font-size: 28rpx;
            overflow: hidden;
          }
          .list-item__content-note{
            margin-top: 6rpx;
            font-size: 24rpx;
            overflow: hidden;
          }
        }
        .list-item__content--center{
          justify-content: center;
        }
        .list-item__extra{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding:0 32rpx;
          margin: 16rpx 0;
          border-left:2rpx dashed #fff;
          .list-item__extra-text_t{
            font-size: 28rpx;
          }
          .list-item__extra-text_b{
            font-size: 24rpx;
            margin-top: 12rpx;
          }
        }
      }
    }
  }
  .list_active_red{
    background-color: #fa5251
  }
  .list_active_blue{
    background-color: #5257fb
  }
  .list-item__black{
    background-color: #f3f3f3;
    color: #303133;
    .list-item__extra{
      border-left:2rpx dashed #303133 !important;
    }
  }
  
</style>
